<!doctype html>
<html lang="en">
	<head>
		<title>学掌门Atstudy网校 - IT在线学习平台|打造精品IT职业在线教育及实战平台</title>
		<meta charset="utf-8">
		<meta data-n-head="ssr" name="keywords"
			content="学掌门Atstudy网校,博为峰Atstudy网校,Atstudy网校,软件测试在线学习,IT职业教育,IT在线培训,IT在线学习,it职业培训,软件测试自学,测试测试工具,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner,大数据">
		<meta data-n-head="ssr" data-hid="description" name="description"
			content="学掌门Atstudy网校打造国内精品IT职业在线教育平台,提供软件测试基础,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner等线上IT学习视频课程,利用在线学习便捷性,结合IT职业发展特点,着重加强IT项目实战技能,结合在线答疑,实时笔记,在线题库及测验,满足IT学习者从零基础起步直至IT高级岗位的技能所需,成就IT职业梦想">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="icon" href="favicon.ico">

		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="css/dashboard.css" rel="stylesheet">

		<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
		<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
		<script src="js/ie-emulation-modes-warning.js"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
						aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">学掌门</a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">下载APP</a></li>
						<li><a href="#">购物车</a></li>
						<li><a href="#">学习中心</a></li>
						<li><a href="#" class="glyphicon glyphicon-user"></a></li>
					</ul>
					<form class="navbar-form navbar-right">
						<input type="text" class="form-control" placeholder="搜索课程">
					</form>
				</div>
			</div>
		</nav>

		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<ul class="nav nav-sidebar">
						<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
						<li><a href="#" id="user">用户管理</a></li>
						<li><a href="#">订单管理</a></li>
						<li><a href="#">商品管理</a></li>
					</ul>

				</div>
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				</div>
			</div>
		</div>

		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="username" class="control-label">用户姓名:</label>
								<input type="text" class="form-control" id="username">
							</div>
							<div class="form-group">
								<label for="useremail" class="control-label">用户邮箱:</label>
								<input type="text" class="form-control" id="useremail">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="save">保存</button>
					</div>
				</div>
			</div>
		</div>
		
		<div class="modal fade" tabindex="-1" role="dialog" id="delModal">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">删除用户</h4>
		      </div>
		      <div class="modal-body">
		        <p>确认要删除吗?</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">删除</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<script>
			window.jQuery || document.write('<script src="js/jquery-3.6.0.js"><\/script>')
		</script>
		<script src="js/bootstrap.min.js"></script>
		<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
		<script src="js/holder.min.js"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<script src="js/mock-min.js"></script>
		<script src="js/server.js"></script>
		<script type="text/javascript">
			$('.btn-danger').click(function() {
				console.log("-----")
			})
			$('#save').click(function() {
				const user = {
					name: $('#username').val(),
					email: $('#useremail').val()
				}
				$.ajax({
					url: '/saveUser',
					type: 'POST',
					data: JSON.stringify(user),
					dataType: 'json',
					success(res) {
						$('#exampleModal').modal('hide');
						$('#user').click();
					},
					error(xhr, info, err) {}
				})
			})

			$('#user').click(function(e) {
				e.preventDefault();
				$.ajax({
					url: '/getUserList',
					type: 'get',
					dataType: 'json',
					success(res) {
						let str = `<form class="form-inline">
						  <div class="form-group">
						    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
						      <input type="text" class="form-control" id="exampleInputAmount" placeholder="输入搜索用户姓名...">
						  </div>
						  <div class="form-group">
						   <button class="btn btn-primary glyphicon glyphicon-search"></button>
						    <button class="btn btn-success" data-toggle="modal" data-target="#exampleModal">添加用户</button>
						   </div>
						</form>
									<div class="table-responsive">
										<table class="table table-striped table-hover">
										<thead>
											<tr>
												<th>id</th>
												<th>姓名</th>
												<th>邮箱</th>
												<th>操作</th>
											</tr>
										</thead><tbody>`;
						let str3 = `</tbody></table></div>`;
						let str2 = ``;
						//把从localStorage中获取的json格式的数据转成对象
						res = $.parseJSON(res);
						res.result.forEach(function(val, index) {
							str2 += `<tr>
										<td>${index + 1}</td>
										<td>${val.name}</td>
										<td>${val.email}</td>
										<td><button type="button" class="btn btn-danger" onclick="del(${index})">删除</button>
										<button type="button" class="btn btn-info" onclick="del(${index})">修改</button></td>
										
									</tr>`;
						})
						$('.main').empty();
						$('.main').append(str + str2 + str3);
						
						// $('.btn-danger').click(function(){
						// 	console.log("-----------")
						// })
					}
				})
				
				
			})		

			function del(id) {
				const userId = {
					id: id
				}
				$('#delModal').modal('show')
				/* $.ajax({
					url: '/delUserById',
					type: 'POST',
					data: JSON.stringify(userId),
					dataType: 'json',
					success(res) {
						$('#user').click();
					},
					error(xhr, info, err) {}
				}) */
			}
		</script>
	</body>
</html>
